<template>
  <div v-for="a in appointList" :key="a.appointmentId" class="pa-card">
<div class="card-tit" style="display: flex; justify-content: space-between; align-items: center;">
  <span>单号：{{ a.appointmentId }}</span>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-weight: normal; color: #666;">状态：</span>
    <el-tag :type="a.pay === '0' ? 'danger' : 'success'" size="small">
      {{ a.pay === '0' ? '未付款' : '已付款' }}
    </el-tag>
    <el-button
        v-if="a.pay === '0'"
        @click="showPaymentDialog(a.appointmentId)"
        size="small"
        style="background-color: #ff69b4; border-color: #ff69b4; color: white;"
    >
      立即付款
    </el-button>
  </div>
</div>

    <el-descriptions
        :column="3"
        :title="'就诊时间：'+ moveT(a.appointmentDate)"
        border
        class="pink-descriptions"
    >

      <el-descriptions-item
          align="center"
          label="宠物"
          label-align="right">
        {{ a.petName }}
      </el-descriptions-item>
      <el-descriptions-item align="center" label="科室" label-align="right">
        <el-tag class="pink-tag">{{ a.departmentName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item align="center" label="医生" label-align="right">
        {{ a.doctorName }}
      </el-descriptions-item>
      <el-descriptions-item align="center" label="描述" label-align="right">
        {{ a.appointmentInfo }}
      </el-descriptions-item>
      <el-descriptions-item align="center" label="挂号时间" label-align="right">
        {{ moveT(a.createTime || "") }}
      </el-descriptions-item>
    </el-descriptions>
    <el-empty v-if="appointList.length===0" description="暂无挂号" class="pink-empty"/>
    <el-dialog
        v-model="paymentDialogVisible"
        :title="paymentTitle"
        width="350px"
        :close-on-click-modal="false"
        :show-close="!isPaying"
    >
      <div v-if="!paymentResult" class="payment-content">
        <div class="qr-code">
          <!-- 模拟二维码 -->
          <div class="fake-qr">
            <div class="qr-inner">
              <div class="qr-pattern"></div>
              <div class="qr-text">模拟支付二维码</div>
            </div>
          </div>
        </div>
        <div class="payment-info">
          <p>订单号: {{ currentOrderId }}</p>
          <p>金额: <span class="amount">¥{{ randomAmount }}</span></p>
          <p v-if="isPaying" class="countdown">支付倒计时: {{ countdown }}秒</p>
        </div>
      </div>

      <div v-else class="payment-result">
        <el-icon :class="paymentResult === 'success' ? 'success' : 'error'" :size="50">
          <component :is="paymentResult === 'success' ? 'CircleCheck' : 'CircleClose'" />
        </el-icon>
        <p class="result-text">{{ paymentResult === 'success' ? '支付成功' : '支付失败' }}</p>
        <p class="result-desc">{{ paymentResult === 'success' ? '订单已完成支付' : '请稍后重试' }}</p>
      </div>

      <template #footer>
        <el-button
            v-if="paymentResult !== 'success'"
            @click="cancelPayment"

        >
<!--          v-if="!isPaying && !paymentResult"-->
<!--          :disabled="isPaying"-->
          取消支付
        </el-button>
        <el-button
            v-if="!isPaying && !paymentResult"
            type="primary"
            @click="simulatePayment('success')"
        >
          模拟成功
        </el-button>
        <el-button
            v-if="!isPaying && !paymentResult"
            type="danger"
            @click="simulatePayment('fail')"
        >
          模拟失败
        </el-button>
        <el-button
            v-if="paymentResult"
            type="primary"
            @click="closeDialog"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {ref, computed, onUnmounted, onMounted} from 'vue'
import { CircleCheck, CircleClose } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reqClientAppoint, updatePay } from "@/request/AppointApi"
import {moveT} from "@/utils/TimeUtil.js";
import {AppointDto} from "@/model/DO/AppointDto";

const appointList = ref<AppointDto[]>([])

// 支付相关状态
const paymentDialogVisible = ref(false)
const isPaying = ref(false)
const paymentResult = ref<'success' | 'fail' | null>(null)
const countdown = ref(10)
const currentOrderId = ref('')
let countdownTimer: number | null = null

// 生成随机金额 50-200 之间
const randomAmount = computed(() => {
  return (Math.floor(Math.random() * 150) + 50).toFixed(2)
})

const paymentTitle = computed(() => {
  if (paymentResult.value === 'success') return '支付成功'
  if (paymentResult.value === 'fail') return '支付失败'
  return isPaying.value ? '支付中...' : '请扫码支付'
})

// 显示支付弹窗
const showPaymentDialog = (appointmentId: string) => {
  currentOrderId.value = appointmentId
  paymentDialogVisible.value = true
  startCountdown()
}

// 开始倒计时
const startCountdown = () => {
  isPaying.value = true
  paymentResult.value = null
  countdown.value = 10

  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      simulatePayment('success')
    }
  }, 1000)
}

// 模拟支付
const simulatePayment = (result: 'success' | 'fail') => {
  clearCountdown()
  isPaying.value = false
  paymentResult.value = result

  if (result === 'success') {
    updateAppoint(currentOrderId.value)
  }
}

// 取消支付
const cancelPayment = () => {
  clearCountdown()
  paymentDialogVisible.value = false
  ElMessage.info('已取消支付')
}

// 关闭弹窗
const closeDialog = () => {
  paymentDialogVisible.value = false
  paymentResult.value = null
}

// 清除倒计时
const clearCountdown = () => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
  isPaying.value = false
}

// 更新支付状态
const updateAppoint = (appointmentId: string) => {
  const appointmentToUpdate = appointList.value.find(a => a.appointmentId === appointmentId)
  if (appointmentToUpdate) {
    appointmentToUpdate.pay = '1'
    updatePay(appointmentToUpdate).then(res => {
      if (res) {
        reqClientAppoint().then(res => {
          appointList.value = res
        })
      }
    })
  }
}

// 组件卸载时清除定时器
onUnmounted(() => {
  clearCountdown()
})

onMounted(() => {
  reqClientAppoint().then(res => {
    appointList.value = res
  })
})
</script>

<style scoped>
.pa-card {
  background-color: #fff5f7;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px 0 rgba(255, 182, 193, 0.3);
}

.card-tit {
  font-size: 16px;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 12px;
}

.pink-descriptions {
  --el-descriptions-title-color: #e75480;
  --el-descriptions-item-bordered-label-background: #ffebee;
  --el-border-color-light: #ffc0cb;
}

.pink-tag {
  --el-tag-bg-color: #ffebee;
  --el-tag-border-color: #ffc0cb;
  --el-tag-text-color: #e75480;
}

.pink-empty {
  --el-empty-fill-color: #ffc0cb;
  --el-empty-text-color: #e75480;
}
.payment-content {
  text-align: center;
}

.qr-code {
  margin: 0 auto 20px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  display: inline-block;
}

.fake-qr {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #f5f5f5 25%, #fff 0, #fff 50%, #f5f5f5 0, #f5f5f5 75%, #fff 0);
  background-size: 20px 20px;
  position: relative;
  border: 1px solid #eee;
}

.qr-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.qr-pattern {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  background:
      linear-gradient(0deg, #333 25%, transparent 0),
      linear-gradient(90deg, #333 25%, transparent 0),
      linear-gradient(180deg, #333 25%, transparent 0),
      linear-gradient(270deg, #333 25%, transparent 0);
  background-size: 20px 20px;
}

.qr-text {
  color: #666;
  font-size: 14px;
}

.payment-info {
  margin-top: 15px;
  color: #666;
}

.payment-info p {
  margin: 8px 0;
}

.amount {
  color: #e75480;
  font-weight: bold;
  font-size: 18px;
}

.countdown {
  color: #e75480;
  font-weight: bold;
}

.payment-result {
  text-align: center;
  padding: 20px 0;
}

.payment-result .success {
  color: #67c23a;
}

.payment-result .error {
  color: #f56c6c;
}

.result-text {
  font-size: 18px;
  margin: 15px 0 5px;
  font-weight: bold;
}

.result-desc {
  color: #999;
  font-size: 14px;
}
</style>
